<template>
  <Top-Page class="vip-centre-box">
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #backText></template>
      <template #content>VIP中心</template>
    </cu-custom>

    <view class="vip-centre">
      <!-- 个人信息 -->
      <view class="bio-box">
        <image class="bio-img" :src="head_img" mode="scaleToFill"></image>
        <view class="bio-name">
          {{ name }}
        </view>

        <!-- 会员于 {{ end_time }} 到期 -->
        <view class="bio-end_time" v-if="end_time">
          {{ end_time }}
        </view>
      </view>

      <!-- 开通 -->
      <view class="set-meal">
        <view class="wrap-title">会员套餐</view>
        <view class="meal-list">
          <view
            :class="[ind === index ? 'li-in' : '', 'meal-li']"
            v-for="(item, index) in mealList"
            @click="changeConfig(item.money, item.month, index)"
          >
            <view class="money-wrap">￥{{ item.money }}</view>
            <view class="num-wrap">
              {{ item.month < 999 ? item.month : "终身" }}
            </view>
            <view class="unit-wrap">{{ item.month < 999 ? "个月" : "" }}</view>
          </view>
        </view>

        <veiw class="submit-btn" @click="submitBtn">￥{{ money }}立即续费</veiw>
      </view>

      <!-- 特权 -->
      <view class="privilege-wrap">
        <view class="wrap-title">VIP特权</view>
        <view class="privilege-list">
          <view class="privilege-li" v-for="item in privilege_li">
            <image
              class="privilege-li-icon"
              :src="item.img"
              mode="widthFix"
            ></image>
            <view class="privilege-li-text">
              {{ item.text }}
            </view>
          </view>
        </view>

        <view class="privilege-more">更多特权 敬请期待</view>
      </view>
    </view>
  </Top-Page>
</template>

<script>
import { useloginStore } from "@/store/login";
import pinia from "@/store/index";
import { apiUrl } from "@/utils/request.js";
const loginStore = useloginStore(pinia);
export default {
  data() {
    return {
      apiUrl: apiUrl,
      userInfo: loginStore.userInfo,
      ind: 0,
      month: 0,
      money: "",
      name: "像风一样",
      end_time: "",
      mealList: [],
      money: "",
      head_img: "",
      privilege_li: [
        {
          img: "../../static/image/vip/vip-icon-1.png",
          text: "红颜免查",
        },
        {
          img: "../../static/image/vip/vip-icon-3.png",
          text: "会员图标",
        },
        // {
        //   img: '../../static/image/vip/vip-icon-5.png',
        //   text: '商业密聊'
        // },
        {
          img: "../../static/image/vip/vip-icon-7.png",
          text: "消息屏蔽",
        },
        {
          img: "../../static/image/vip/vip-icon-9.png",
          text: "消息指定",
        },
        {
          img: "../../static/image/vip/vip-icon-11.png",
          text: "隐形收藏",
        },
      ],
    };
  },
  mounted() {
    this.head_img = this.userInfo.avatar;
    this.name = this.userInfo.displayName;
    this.firstApi();

    if (this.userInfo.member_expire >= 4102415999) {
      this.end_time = "永久会员";
    } else {
      this.TimeStampToDate(this.userInfo.member_expire ?? 0);
    }
  },
  methods: {
    TimeStampToDate(timestampSeconds) {
      let formattedDate = "";
      if (timestampSeconds) {
        // 将时间戳转换为毫秒（JavaScript中使用毫秒表示时间戳）
        let timestampMilliseconds = timestampSeconds * 1000;

        // 创建Date对象
        let dateObject = new Date(timestampMilliseconds);

        // 获取年、月、日
        let year = dateObject.getFullYear();
        let month = ("0" + (dateObject.getMonth() + 1)).slice(-2); // 月份是从0开始计数的，所以要加1
        let day = ("0" + dateObject.getDate()).slice(-2);

        // 构建年月日字符串
        formattedDate = year + "/" + month + "/" + day;
      }

      this.end_time = formattedDate;
    },
    firstApi() {
      this.mealList.length = 0;
      this.$api.msgApi.getMemberConfig().then((res) => {
        const { code, data, msg } = res;

        if (code == 0) {
          this.mealList.push(...data);
          this.money = data[0].money;
          this.month = data[0].month;
        }
      });
    },
    submitBtn() {
      this.$api.msgApi.getMemberreCharge(this.month).then((res) => {
        const { code, data, msg } = res;

        const url = `${this.apiUrl}/common/Pub/alipay?trade_no=${data.trade_no}`;

        if (code == 0) {
          // #ifdef APP-PLUS
          plus.runtime.openURL(url, (err) => {
            uni.showToast({
              title: `${err}`,
              icon: "none",
            });
          });
          // #endif

          // #ifdef H5
          location.href = url;
          // #endif
          // uni.navigateTo({
          //   url: `/pages/pay/pay?url=${JSON.stringify(url)}`
          // });
        }
      });
    },
    changeConfig(money, month, index) {
      this.ind = index;
      this.money = money;
      this.month = month;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/vip.scss";
</style>
